<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <!-- Bootstrap -->
    <link href="framework/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="framework/jquery/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="framework/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--custom-->
    <link href="css/index.css" rel="stylesheet">
    <link href="css/marquee.css" rel="stylesheet">
    <!--template-->
    <script src="framework/templates/template.js"></script>
    <!--layer-->
    <script src="framework/layer-v3.1.0/layer/layer.js"></script>
    <link href="framework/layer-v3.1.0/layer/custom.css" rel="stylesheet">
    <!--marquee-->
    <script src="framework/marquee/marquee.js"></script>
    <!--websoket-->
    <script src="framework/websocket/socket-common.js"></script>

    <script src="framework/Highcharts-5.0.13/code/highcharts.js"></script>
    <script src="framework/Highmaps-5.0.12/code/modules/map.js"></script>
    <script src="framework/Highmaps-5.0.12/code/modules/drilldown.js"></script>

    <script src="framework/Highmaps-5.0.12/code/china.js"></script>
    <script src="framework/Highmaps-5.0.12/code/themes/dark-unica.js"></script>
</head>
<body>

<!--<marquee id='marquee' class='marquee' loop='1' scrollamount='10' onstop="alert(80)">8888</marquee>-->

<!--<div id="mq" class="marquee">
    <div>js实现的跑马灯效果11111</div>
</div>-->

<div class="container-fluid">
    <!--header-->
    <div class="row padder-v-lg">
        <div class="col-md-9">
            <h1 class="header-title">成都千嘉客户服务感知管理系统<small>CHENGDU QIANJIA TECHNOLOGY CO.,LTD</small></h1>
        </div>
        <div class="col-md-3"></div>
    </div>
    <!--content-->
    <div class="row">
        <!--left-->
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe" onclick="location.href='/cbsjhj.html'" style="cursor: pointer;">
                                    <span class="content">抄表数据回家</span>
                                    <span class="right-btn pull-right"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="padder-v padder-l-xs">
                                    <span class="span-base span-hg span-zt1 span-flex">
                                        <div>
                                            <p>客户总数</p>
                                            <p id="MY_KEHU"></p>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="padder-v padder-r-xs">
                                    <span class="span-base span-hg span-zt1 span-flex">
                                        <div>
                                            <p>投运总量</p>
                                            <p id="MY_TOUYUN_ZONGSHU"></p>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="padder-v padder-l-xs">
                                    <span class="span-base span-hg span-zt2 span-flex">
                                        <div>
                                            <p>已回家客户数</p>
                                            <p id="CBHJ_KEHU"></p>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="padder-v padder-r-xs">
                                    <span class="span-base span-hg span-zt2 span-flex">
                                        <div>
                                            <p>已回家用户数</p>
                                            <p id="CBHJ_YONGHU"></p>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-t-md">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe" onclick="location.href='/table-data-my-new.html'" style="cursor: pointer;">
                                    <span class="content">民用表运行情况</span>
                                    <span class="right-btn pull-right"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-sm">
                                    <div class="highchar-content">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--middle-->
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="part wrapper padder-t-md">
                        <div id="map" class="map"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--right-->
        <div class="col-md-3">
            <!--first-->
            <div class="row">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe" onclick="location.href='/table-data-gy-new.html'" style="cursor: pointer;">
                                    <span class="span-base span-sm span-success pull-left" id="month"></span>
                                    <span class="content m-l-md">工业表运行情况</span>
                                    <span class="right-btn pull-right"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="lbx-parent">
                                    <div class="lbx lbx1">
                                        <div>
                                            <p class="m-t-xs">客户数</p>
                                            <p id="gy_khsl"></p>
                                        </div>
                                    </div>
                                    <div class="lbx lbx2">
                                        <div>
                                            <p class="m-t-xs">投运总数</p>
                                            <p id="gy_tyzs"></p>
                                        </div>
                                    </div>
                                    <div class="lbx lbx3">
                                        <div>
                                            <p class="m-t-xs">抄表数量</p>
                                            <p id="gy_cbsl"></p>
                                        </div>
                                    </div>
                                    <div class="lbx lbx4">
                                        <div>
                                            <p class="m-t-xs">抄表率</p>
                                            <p id="gy_cbl"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--second-->
            <div class="row m-t-md">
                <div class="col-md-12">
                    <div class="part">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper-spe" onclick="location.href='/xxh.html'" style="cursor: pointer;">
                                    <span class="content">信息化运行情况</span>
                                    <span class="right-btn pull-right"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper">
                                    <span class="span-base span-lg span-zt1">客服系统</span>
                                    <span class="content-lg pull-right" id="xxh_kfxt"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper">
                                    <span class="span-base span-lg span-zt2">管网GIS及巡检</span>
                                    <span class="content-lg pull-right" id="xxh_gis"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper">
                                    <span class="span-base span-lg span-zt3">应急抢险系统</span>
                                    <span class="content-lg pull-right" id="xxh_yj"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="divide-line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="wrapper">
                                    <span class="span-base span-lg span-zt4">SCADA系统</span>
                                    <span class="content-lg pull-right" id="xxh_scada"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script type="text/javascript">
    $(function () {
        initData();
        initMapData();
    });

    function initData(){
        var url = "/qjzt/data";
        $.post(url, {}, function (resp) {
            //初始化工业、信息化数据
            if(resp.attributes && resp.attributes.data){
                var map = resp.attributes;
                var data = map.data;
                //工业表数据
                $("#month").html((data.NY + "").substring(4) + "月");
                $("#gy_khsl").html(data.SY_KEHU);
                $("#gy_tyzs").html(data.SY_TOUYUN_ZONGSHU.toLocaleString());
                $("#gy_cbsl").html(data.SY_CHAOBIAO_SHU.toLocaleString());
                $("#gy_cbl").html((((data.SY_CHAOBIAO_CHENGGONG_SHU * 1) / (data.SY_CHAOBIAO_SHU * 1)) * 100).toFixed(2).toLocaleString() + "%");

                //信息化
                $("#xxh_kfxt").html(data.XXH_KEHU.toLocaleString());
                $("#xxh_gis").html(data.XXH_GIS.toLocaleString());
                $("#xxh_yj").html(data.XXH_QIANGXIAN.toLocaleString());
                $("#xxh_scada").html(data.XXH_SCADA.toLocaleString());

                //初始化民用表char
                var categories = map.categories;
                var series1 = map.series1;
                var series2 = map.series2;
                var series3 = map.series3;
                var series4 = map.series4;
                initChar(categories, series1, series2, series3, series4);

                //初始化抄表数据回家
                $("#MY_KEHU").html(data.MY_KEHU);
                $("#MY_TOUYUN_ZONGSHU").html(parseInt(parseInt(data.MY_TOUYUN_ZONGSHU) / 10000) + " 万");
                $("#CBHJ_KEHU").html(data.CBHJ_KEHU);
                $("#CBHJ_YONGHU").html(parseInt(parseInt(data.CBHJ_YONGHU) / 10000) + " 万");
            }
        })
    }

    function initChar(categories, series1, series2, series3, series4){
        $('.highchar-content').highcharts({
            colors: ["#23c3fd", "#fc198f", "#a4ca57"],
            chart: {
                zoomType: 'xy',
                style: {
                    fontSize: "15px"
                }
            },
            title: {
                text: null
            },
            xAxis: [{
                categories: categories,
                crosshair: true,
                labels: {
                    style: {
                        fontSize: "15px"
                    }
                }
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}',
                    style: {
                        color: "#c4c6ca",
                        fontSize: "15px"
                    }
                },
                title: {
                    text: '单位<br>(万只)',
                    style: {
                        color: "#c4c6ca"
                    },
                    rotation: 0,
                    y: -30,
                    offset: 30
                }
            }, { // Secondary yAxis
                labels: {
                    format: '{value} %',
                    style: {
                        color: "#c4c6ca",
                        fontSize: "15px"
                    }
                },
                title: {
                    text: '抄表率',
                    style: {
                        color: "#c4c6ca"
                    },
                    rotation: 0,
                    y: -30,
                    offset: 40
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '投运量',
                type: 'column',
                yAxis: 0,
                data: series1,
                tooltip: {
                    valueSuffix: ' 万'
                }
            },{
                name: '抄表数',
                type: 'column',
                yAxis: 0,
                data: series2,
                tooltip: {
                    valueSuffix: ' 万'
                }
            },{
                name: '抄表成功数',
                type: 'column',
                yAxis: 0,
                data: series3,
                tooltip: {
                    valueSuffix: ' 万'
                }
            }, {
                name: '抄表率',
                type: 'spline',
                yAxis: 1,
                data: series4,
                tooltip: {
                    valueSuffix: ' %'
                },
                color: "#f38b08",
                lineWidth: 4
            }]
        });
    }

    function initMapData() {
        var url = "/qjzt/mapData";
        $.post(url, {}, function (resp) {
            //初始化工业、信息化数据
            if(resp.obj){
                initMap(resp.obj);
            }
        })
    }

    var map;
    var lastIndex = 0;
    var geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
    function initMap(data){
        // 初始化图表
        map = new Highcharts.Map('map', {
            title: {
                text: '<a href="/callcenter-data.html" style="font-size: 30px;">呼叫中心今日简报</a>',
                align: 'center',
                style: {
                    color: '#ffffff',
                    fontFamily: "SimSun"
                }
            },
            colorAxis: {
                min: 0,
                minColor: '#3a91dd',
                maxColor: '#3a91dd'
            },
            series: [{
                data: data,
                name: '今日统计',
                mapData: Highcharts.maps['cn/china'],
                joinBy: 'name' // 根据 name 属性进行关联
            }],
            //图例，这里关闭
            legend:{
                enabled: false
            },
            chart: {
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                plotBackgroundColor: 'rgba(0,0,0,0)',
                plotBorderWidth: 0,
                events: {
                    drilldown: function(e) {
                        console.log(e);
                        lastIndex = 0;
                        // 异步下钻
                        if (e.point.drilldown) {
                            var pointName = e.point.properties.fullname;
                            map.showLoading('下钻中，请稍后...');
                            // 获取二级行政地区数据并更新图表
                            $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                                data = Highcharts.geojson(data);
                                $.post("/qjzt/mapDataProvince", {provinceName: pointName}, function (resp) {
                                    Highcharts.each(data, function(d) {
                                        d.value = 0;
                                        d.o_count = 0;
                                        d.s_count = 0;
                                        d.titleName = "地市";
                                        $.each(resp.obj, function (i, v) {
                                            if(d.name == v.name1 || d.name == v.name2){
                                                d.o_count = v.o_count;
                                                d.s_count = v.s_count;
                                            }
                                        })
                                    });
                                    map.hideLoading();
                                    map.addSeriesAsDrilldown(e.point, {
                                        name: e.point.name,
                                        data: data,
                                        dataLabels: {
                                            enabled: true,
                                            format: '{point.name}',
                                            style: {
                                                color: '#ffffff',
                                                fontSize: "15px",
                                                textOutline: null
                                            },
                                            color: "#ffffff",
                                            tooltip: {
                                                enabled: false
                                            }
                                        }
                                    });
                                    map.setTitle({
                                        text: "<span style='font-size: 30px;'>" + pointName + "</span>"
                                    });
                                });
                            });
                        }
                    },
                    drillup: function() {
                        lastIndex = 0;
                        map.setTitle({
                            text: '<a href="/callcenter-data.html" style="font-size: 30px;">呼叫中心今日简报</a>'
                        });
                    }
                }
            },
            tooltip: {
                backgroundColor: '#f38b08',
                useHTML: true,
                headerFormat: '<table style="font-size: 20px;"><tr><td>{point.name}</td></tr>',
                pointFormat: '<tr style="border-bottom: 1px solid #ffffff;"><td style="padding: 10px; border-right: 1px solid #ffffff;">{point.titleName}</td><td style="padding: 10px; border-right: 1px solid #ffffff;">工单</td><td style="padding: 10px;">签到</td></tr>' +
                '<tr><td style="padding: 10px; border-right: 1px solid #ffffff;">{point.name}</td><td style="padding: 10px; border-right: 1px solid #ffffff;">{point.o_count}</td><td style="padding: 10px;">{point.s_count}</td></tr>',
                footerFormat: '</table>',
                borderRadius: 20
            },
            labels: {
                items: {
                    style: {color: '#ffffff'}
                }
            }
        });

        showMapTip(data);
    }

    function showMapTip(data){
        var lastPoint = map.series[0].points[lastIndex];
        if(lastPoint && (lastPoint.o_count > 0 || lastPoint.s_count > 0)){
            setHover();
            setTimeout(function () {
                clearHover();
                lastIndex++;
                showMapTip(data);
            }, 3000)
        }else{
            lastIndex++;
            if(lastIndex >= data.length){
                lastIndex = 0;
            }
            showMapTip(data);
        }
    }

    function setHover(){
        var lastPoint = map.series[0].points[lastIndex];
        lastPoint.setState('hover');
        map.tooltip.refresh(lastPoint); // Show tooltip
    }

    function clearHover(){
        var lastPoint = map.series[0].points[lastIndex];
        lastPoint.setState();
        map.tooltip.refresh(lastPoint); // Show tooltip
    }

</script>
</html>